<template>
	<view class="login">
		<view class="text-center bg-white myimg">
			<image mode="aspectFill" src="../../static/logo_108.png" style="width:108px;height:108px;"></image>
		</view>
		<view class="wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai"
					:label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
					<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="number"></u-input>
					<u-button slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item>

					<u-checkbox-group>
						<u-checkbox v-model="agree" shape="circle">我已阅读并同意<text class="xie_yi"
								@tap="open_doc(1)">《用户协议》</text>及<text class="xie_yi" @tap="open_doc(2)">《隐私政策》</text>
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u-form>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<view class="text-center">
			<button @tap="login" class="cu-btn bg-blue lg" style="width: 80%;">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		sendSmsMessage,
		login
	} from '@/api/login.js'
	import userXieYi from '@/data/userXieYi.js'
	import privacy_policy from '@/data/privacy_policy.js'
	export default {
		data() {
			return {
				AlwaysMessage: {
					Sender: '',
					Receiver: '',
					ContentType: 0
				},
				model: {
					phone: '',
					code: '',
					clientID: '',
					imei: '',
					android: '',
					oaid: '',
					channel: ''

				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				},
				border: false,
				agree: true,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			let that = this
			// #ifdef APP-PLUS
			plus.device.getInfo({
				success: function(e) {
					console.log(e)
					that.model.imei = e.imei
				},
				fail: function(e) {

				}
			})

			plus.device.getOAID({
				success: function(e) {
					that.model.oaid = e.oaid
				},
				fail: function(e) {

				}
			})
			// #endif
		},
		methods: {
			// 打开用户协议
			open_doc(state) {
				if (state === 1) {
					uni.showModal({
						title: '用户协议',
						content: userXieYi,
						showCancel: false
					})
				} else if (state === 2) {
					uni.showModal({
						title: '隐私政策',
						content: privacy_policy,
						showCancel: false
					})
				}
			},
			login() {
				if (!this.agree) {
					this.$u.toast('同意协议才能登录哦')
					return
				}
				let that = this
				// #ifdef APP-PLUS
				this.model.clientID = plus.push.getClientInfo().clientid
				var Settings = plus.android.importClass("android.provider.Settings");
				var main = plus.android.runtimeMainActivity();
				that.model.android = Settings.Secure.getString(main.getContentResolver(), Settings.Secure.ANDROID_ID);
				that.model.channel = plus.runtime.channel
				console.log(that.model)
				that.tologin()

				// plus.device.getInfo({
				// 	success: function(e) {
				// 		console.log(that.model)
				// 		that.model.imei = e.imei
				// 		that.tologin()
				// 	},
				// 	fail: function(e) {
				// 		that.tologin()
				// 	}
				// })
				// #endif

			},

			tologin() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						login(this.model).then(res => {
							this.$u.vuex('vuex_token', res.Data.axtoken);
							this.$u.vuex('vuex_user', res.Data.user);
							setTimeout(() => {
								this.$goNavWindow('../my/my')
							}, 500)

						}, err => {
							this.$u.toast(err.Msg);
						})

					}
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			async getCode() {
				if (!this.$u.test.mobile(this.model.phone)) {
					this.$u.toast('手机号不正确');
					return
				}
				this.AlwaysMessage.Receiver = this.model.phone

				if (this.$refs.uCode.canGetCode) {
					//try {
					sendSmsMessage(this.AlwaysMessage).then(res => {
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
						//console.log(res);
					}, err => {
						this.$u.toast('验证码发送失败了');
						this.$refs.uCode.start();
						console.log(err)
					})
					// if (resData.Code === 0) {

					// } else {
					// 	this.$refs.uCode.start();
					// 	// }
					// } catch (e) {
					// 	this.$refs.uCode.start();
					// }
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码',
					// 	mask: true
					// })
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖

					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.xie_yi {
		color: #108EE9;
	}

	.myimg {

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.wrap {
		padding: 30rpx;
		background-color: white;
		margin: 30upx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
